<template>
  <!-- index.wxml -->
  <view class="container">
    <view class="cart-content">
      <view class="cart-item"
            v-for="(item, index) in cartData"
            :key="index">
        <view class="flex-box flex-box-v-center">
          <view>
            <view :data-item="index"
                  @tap="changeGoods"
                  :class="'redio-border ' + (item.change?'change':'')">
              <text class="just"></text>
            </view>
          </view>
          <view class="goods-img">
            <image src="./../../static/image/296866_00.jpg"></image>
          </view>
          <view class="goods-details flex-item-1">
            <view class="goods-name font_s_28">{{item.goodsName}}</view>
            <view class="goods-money font_s_28 font_c_pink">
              <text>￥ {{item.money}}</text>
            </view>
          </view>
          <view>
            <view :data-item="index"
                  class="delect font_s_24"
                  @tap="deleteGoods">删除</view>
          </view>
        </view>
      </view>
    </view>
    <view class="footerBar">
      <view class="l_container">
        <view class="l_row">
          <view class="l_col-4">
            <view class="shopCart">
              <text class="font_s_30">共计：2000.00 元</text>
            </view>
          </view>
          <view class="l_col-2">
            <view class="footerButton flex-box">
              <view class="font_s_28 pay flex-item-1">立即购买</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
//index.js
//获取应用实例
const app = getApp().globalData

export default {
  data() {
    return {
      cartData: [
        {
          goodsName: '拿花篮的小姑娘',
          money: '300.00',
          change: true,
          id: '1'
        },
        {
          goodsName: '拿花篮的小姑娘',
          money: '300.00',
          change: false,
          id: '2'
        },
        {
          goodsName: '拿花篮的小姑娘',
          money: '300.00',
          change: false,
          id: '3'
        }
      ]
    }
  },

  components: {},
  props: {},
  onLoad: function() {},
  methods: {
    //事件处理函数
    bindViewTap: function() {},

    //选中商品
    changeGoods(e) {
      let index = e.currentTarget.dataset.item
      let cartData = this.cartData
      cartData[index].change = !cartData[index].change
      this.cartData = cartData
    },

    deleteGoods(e) {
      let index = e.currentTarget.dataset.item
      let cartData = this.cartData
      let that = this
      uni.showModal({
        title: '提示',
        content: '您确定要删除该商品吗',

        success(res) {
          if (res.confirm) {
            console.log('用户点击确定')
            cartData.splice(index, 1)
            that.cartData = cartData
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
  }
}
</script>
<style>
@import './cart.css';
</style>